import { computed, defineComponent, Ref, ref } from 'vue';
import {
  getEditorEmits,
  getDateRangeProps,
  useNamespace,
} from '@ibiz-template/vue3-util';
import './ibiz-date-range-picker.scss';
import { DateRangeEditorController } from '../date-range-editor.controller';

export const IBizDateRangePicker = defineComponent({
  name: 'IBizDateRangePicker',
  props: getDateRangeProps<DateRangeEditorController>(),
  emits: getEditorEmits(),
  setup(props, { emit }) {
    const ns = useNamespace('date-range-picker');

    const c = props.controller;

    const editorModel = c.model;

    // 值分割符
    let valueSeparator = '-';
    // 在范围选择器里取消两个日期面板之间的联动
    let unlinkPanels = false;
    // 开始占位提示
    let startPlaceHolder = '';
    // 结束占位提示
    let endPlaceHolder = '';
    // 选择范围时的分隔符
    let rangeSeparator = '至';
    if (editorModel.editorParams) {
      if (editorModel.editorParams.valueSeparator) {
        valueSeparator = editorModel.editorParams.valueSeparator;
      }
      if (editorModel.editorParams.startPlaceHolder) {
        startPlaceHolder = editorModel.editorParams.startPlaceHolder;
      }
      if (editorModel.editorParams.endPlaceHolder) {
        endPlaceHolder = editorModel.editorParams.endPlaceHolder;
      }
      if (editorModel.editorParams.rangeSeparator) {
        rangeSeparator = editorModel.editorParams.rangeSeparator;
      }
      if (editorModel.editorParams.unlinkPanels) {
        unlinkPanels = c.toBoolean(editorModel.editorParams.unlinkPanels);
      }
    }

    // 类型
    const type = ref('daterange');
    switch (editorModel.editorType) {
      case 'DATERANGE':
        type.value = 'datetimerange';
        break;
      case 'DATERANGE_NOTIME':
        type.value = 'daterange';
        break;
      default:
        type.value = 'datetimerange';
    }

    // 格式
    const format = ref('YYYY-MM-DD');
    // 值格式化
    const valueFormat = c!.valueFormat;
    if (valueFormat) {
      format.value = valueFormat;
    }

    // 关系表单项集合
    const refFormItem: Ref<string[]> = ref([]);
    const editorItems = editorModel.editorItems;
    if (editorItems && editorItems.length > 0) {
      const editorItemNames: string[] = editorItems.map(
        (item: IData) => item.id,
      );
      refFormItem.value = editorItemNames;
    }

    // 当前值
    const curValue = computed({
      get() {
        let value: string[] = [];
        if (refFormItem.value) {
          refFormItem.value.forEach((name: string) => {
            if (props.data[name]) {
              value.push(props.data[name]);
            }
          });
        } else if (props.value && typeof props.value === 'string') {
          value = props.value.split(valueSeparator);
        }
        return value;
      },
      set(dates: string[]) {
        if (dates && dates.length > 0) {
          emit('change', dates.join(valueSeparator));
          if (refFormItem.value) {
            dates.forEach((date: string, index: number) => {
              emit('change', date, refFormItem.value[index]);
            });
          }
        } else {
          emit('change', null);
          if (refFormItem.value) {
            refFormItem.value.forEach((date: string, index: number) => {
              emit('change', null, refFormItem.value[index]);
            });
          }
        }
      },
    });

    // 聚焦
    const onFocus = () => {
      emit('focus');
    };

    // 失焦
    const onBlur = () => {
      emit('blur');
    };

    return {
      ns,
      c,
      refFormItem,
      curValue,
      type,
      format,
      valueSeparator,
      startPlaceHolder,
      endPlaceHolder,
      rangeSeparator,
      unlinkPanels,
      onFocus,
      onBlur,
    };
  },
  render() {
    return (
      <div class={[this.ns.b()]}>
        <el-date-picker
          v-model={this.curValue}
          type={this.type}
          popper-class={this.ns.b('popper')}
          format={this.format}
          value-format={this.format}
          disabled={this.disabled}
          readonly={this.readonly}
          range-separator={this.rangeSeparator}
          start-placeholder={this.startPlaceHolder}
          end-placeholder={this.endPlaceHolder}
          unlink-panels={this.unlinkPanels}
          onFocus={this.onFocus}
          onBlur={this.onBlur}
        ></el-date-picker>
      </div>
    );
  },
});
